<template>
  <slot name="header" />
  <a-drawer
    v-model:visible="visible"
    class="drawer-view"
    :title="title"
    :placement="placement"
    :footer-style="{ textAlign: 'right' }"
    :mask-closable="maskClosable"
    :keyboard="keyboard"
    size="large"
    @after-visible-change="afterVisibleChange"
    @close="onCloseCallback"
  >
    <!-- 抽屉右上角的操作区域 -->
    <template #extra>
      <slot name="extraArea" />
    </template>

    <!-- 主题内容区域 -->
    <slot name="contentArea" />

    <template #footer>
      <a-button @click.stop="onCloseCallback">取 消</a-button>
      <!-- 自定义操作区域 -->
      <slot name="footerArea" />
      <a-button type="primary" @click.stop="onSubmitCallback">确 定</a-button>
    </template>
  </a-drawer>
  <slot name="footer" />
</template>
<script setup lang="ts">
interface Props {
  title?: string
  placement?: string
  size?: string
  readonly maskClosable?: boolean
  readonly keyboard?: boolean
}
const props = withDefaults(defineProps<Props>(), {
  title: "详情",
  placement: "right",
  maskClosable: false,
  keyboard: false,
  size: "large",
})

const emits = defineEmits<{
  (e: "on-drawer-ok"): void
  (e: "on-drawer-cancel"): void
}>()

//弹框控制展示
const visible = ref<boolean>(false)
const afterVisibleChange = (bool: boolean) => {
  console.log("visible", bool)
}

//外部调用该方法打开弹框
const setOpen = (): void => {
  visible.value = true
}

//外部调用该方法关闭弹框
const setCloes = (): void => {
  visible.value = false
}

//点击关闭icon | 点击按钮取消关闭弹框
const onCloseCallback = () => {
  emits("on-drawer-cancel")
}

//提交触发父组件方法
const onSubmitCallback = () => {
  emits("on-drawer-ok")
}

//暴露信息
defineExpose({
  setOpen,
  setCloes,
})
</script>

<style scoped lang="less">
.drawer-view {
  .ant-btn {
    margin: 0 6px;
  }
}
</style>
